{{! Services (ADR 0048): the heading and the photo cards, each with the Service element's markup and classes (service-card/style.css) and a column's box (or, Take turns, ADR 0126: Soft, Dark and a muted accent card by card), corners and hover; with more cards than columns, optionally a carousel (ADR 0047). }}
<div {{@attrs}}>{{#heading}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><h2 class="sv-sectionhead__title"{{@edit heading}}>{{{heading}}}</h2>{{#intro}}<p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p>{{/intro}}</div>{{/heading}}{{^heading}}{{#intro}}<div class="sv-sectionhead sv-sectionhead--{{headingAlign}}{{#headingSize}} sv-sectionhead--size-{{headingSize}}{{/headingSize}}"><p class="sv-sectionhead__text"{{@edit intro}}>{{intro}}</p></div>{{/intro}}{{/heading}}{{#overflow}}<div class="sv-carousel sv-carousel--nav-{{carouselNav}}" data-sv-carousel><div class="sv-carousel__track">{{/overflow}}{{#items}}<article class="sv-service-card sv-service-card--look-{{look}}{{#shape}} sv-service-card--shape-{{shape}}{{/shape}}{{#titleSize}} sv-service-card--title-size-{{titleSize}}{{/titleSize}} sv-service-cards__item{{^turns}}{{#style}} sv-card-{{style}}{{#styleCustom}} sv-card-custom{{/styleCustom}}{{/style}}{{/turns}}{{#turns}} sv-card-turns{{/turns}} sv-round-{{corners}}{{#hover}} sv-cardhover-{{hover}}{{/hover}}"{{^turns}}{{#styleCustom}} style="--sv-custom-card:{{styleCustom}}"{{/styleCustom}}{{/turns}}><div class="sv-service-card__media">{{#image.url}}<img class="sv-service-card__photo wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} loading="lazy" decoding="async">{{/image.url}}{{^image.url}}{{@placeholder items.image}}{{/image.url}}</div>{{#number}}<span class="sv-service-card__number"{{@edit items.number}}>{{number}}</span>{{/number}}<div class="sv-service-card__body"><h3 class="sv-service-card__title"{{@edit items.title}}>{{{title}}}</h3>{{#description}}<p class="sv-service-card__text"{{@edit items.description}}>{{description}}</p>{{/description}}{{#link.url}}{{#moreLabel}}<span class="sv-service-card__more" aria-hidden="true">{{moreLabel}}</span>{{/moreLabel}}{{/link.url}}</div>{{#link.url}}<span class="sv-image__arrow sv-service-card__arrow" aria-hidden="true"></span><a class="sv-service-card__link" href="{{link.url}}"{{#link.newTab}} target="_blank" rel="noopener noreferrer"{{/link.newTab}}><span class="sv-service-card__sr">{{{title}}}</span></a>{{/link.url}}</article>{{/items}}{{#overflow}}</div><button type="button" class="sv-carousel__arrow sv-carousel__arrow--prev" aria-label="{{prevLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" class="sv-carousel__arrow sv-carousel__arrow--next" aria-label="{{nextLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 6 6 6-6 6"/></svg></button></div>{{/overflow}}</div>